import React from 'react';
import { 
  Box, 
  Typography,
  useTheme
} from '@mui/material';
import { useNavigate } from 'react-router-dom';
import { useDarkMode } from 'contexts/DarkMode';
import backgroundImage from 'images/backgroundImage.gif';
import backgroundLoader from 'images/backgroundLoader.gif';
import { StyledButton } from './styledComponents';

const Bar = ({ 
  isHomePage,
  useCover = true,
  boxHeight = '100vh',
  useOverlay = true,
  useLoader = false
}) => {
  const navigate = useNavigate();
  const theme = useTheme();
  const { darkMode: contextDarkMode } = useDarkMode();
  
  const navigateOpen = (path) => {
    navigate(path);
  };

  if (!isHomePage) {
    return null;
  }
  
  return (
    <Box
      sx={{
        height: boxHeight,
        width: '100%',
        position: 'relative',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-end',
        backgroundImage: `url(${contextDarkMode && useLoader ? backgroundLoader : backgroundImage})`,
        backgroundPosition: 'center bottom',
        backgroundRepeat: 'no-repeat',
        backgroundSize: useCover ? 'cover' : 'auto',
        ...(contextDarkMode && useOverlay && {
          '&::before': {
            content: '""',
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: theme.palette.background.default,
            opacity: 0.95,
            zIndex: 0,
          }
        })
      }}
    >
      {/* Call-to-Action Buttons */}
      <Box 
        sx={{ 
          position: 'absolute',
          top: '25%',
          left: '50%',
          transform: 'translateX(-50%)',
          display: 'flex',
          gap: '16px',
          zIndex: 1,
        }}
      >
        <StyledButton
          onClick={() => navigateOpen('/auth/login')}
          darkMode={contextDarkMode}
          variant="contained"
          sx={{ 
            padding: '10px 30px',
            fontSize: '1.1rem',
            fontWeight: 'bold'
          }}
        >
          Demo
        </StyledButton>
        
        <StyledButton
          onClick={() => navigateOpen('/auth/register')}
          darkMode={contextDarkMode}
          variant="contained"
          sx={{ 
            padding: '10px 30px',
            fontSize: '1.1rem',
            fontWeight: 'bold'
          }}
        >
          Signup
        </StyledButton>
      </Box>
      
      <Box 
        sx={{ 
          marginBottom: '4rem',
          textAlign: 'center',
          padding: '0 1rem',
          zIndex: 1,
        }}
      >
        <Typography 
          variant="h3" 
          component="h1" 
          sx={{ 
            fontWeight: 'bold',
            fontFamily: 'Poppins',
            color: 'white',
            marginBottom: '1rem'
          }}
        >
          Premium FSBO Leads for Agents
        </Typography>
        <Typography 
          variant="h4" 
          component="h2" 
          sx={{ 
            fontWeight: 'bold',
            fontFamily: 'Poppins', 
            color: 'white'
          }}
        >
          Launch Your Property Listing Referral Today
        </Typography>
      </Box>
    </Box>
  );
};

export default Bar;

